<template>
  <div class="list-main">
    <van-nav-bar
      left-text="返回"
      class="list-title"
      left-arrow
      @click-left="backToStatisticsList"
    >
      <template #title>
        <van-icon name="friends" size="25" />
        <span class="list-title"> 单位排名 </span>
        <span v-on:click="deptList.reverse()">倒序</span>
      </template>
    </van-nav-bar>
    <div class="teacherlist-main" style="padding-bottom:80px">
      <div
        v-for="(dept, index) in deptList"
        :key="dept.rankNo"
        is-link
        class="vo-list"
      >
        <div class="teacher-info">
          <div class="dept-NO" :id="index">第{{ index+1}}名：</div>
          <div class="dept-name  van-ellipsis"> {{ dept.deptName }}</div>
          <div class="score">{{ dept.score!=undefined?parseFloat(dept.score).toFixed(2):0}}分</div>
        </div>
      </div>
      <div style="text-align:center">没有更多了...</div>
    </div>
  </div>
</template>

<script>
import { getDeptRank } from "@/api/pingjiao/statistics";
import { Toast } from "vant";
export default {
  name: "StatisticsListByDept",
  data() {
    return {
      evalutionActivityId: 0,
      deptList: [
        // {
        //   courseClassNo: null,
        //   courseName: null,
        //   deptName: "",
        //   rankNo: 1,
        //   realName: "",
        //   score: 100,
        //   teacherId: 1,
        //   teacherNo: "",
        // },
      ],
      loading: false, //列表加载中
      error: false, //列表加载出错
      finished: false, //列表加载完成
    };
  },
  created() {
    this.$emit("show", -1); //传递给父组件改变tab的激活active样式
    this.evalutionActivityId = this.$route.query.evalutionActivityId;
    this.getDeptList()
  },
  watch: {},
  methods: {
    getDeptList() {
      let that = this;
      this.loading = true; // 加载状态开始
      console.log("get dept list");
      getDeptRank(this.evalutionActivityId)
        .then((res) => {
          that.deptList = res.data;
          that.loading = false; // 加载状态结束
          that.finished = true; //提示列表加载完成
          console.log(" get  res", res);
          console.log("deptist", res.rows);
        })
        .catch((error) => {
          console.log("get dept data res", error);
          this.error = true; //提示列表加载出错点击重新加载
        });
    },
    backToStatisticsList() {
      this.$router.push({ path: "/dingding/statisticsList" });
    },
  },
};
</script>

<style  rel="stylesheet/scss" lang="scss">
.teacherlist-main {
  height: 300px;
  width: 100%;
  overflow-y: scroll;
}
.van-nav-bar .van-icon {
  top: 5px;
}
.list-title {
  line-height: 20px;
  font-weight: bold;
  font-size: 18px;
  color: #1989fa;
}
.vo-list {
  margin: 0px auto;
  width: 95%;
  border-bottom: 2px dashed #eee;
}
.vo {
  display: flex;
  flex-direction: column;
}
.custom-title {
  font-size: 13pt;
  font-weight: bolder;
}
.teacher-info {
  width: 100%;
  overflow: hidden;
  font-size: 1rem;
  line-height: 20px;
  display: flex;
  flex-direction: row;
}

.dept_NO {
  width: 5rem;
}
.teacher-info .NO {
  width: 15rem;
}
.teacher-info .real-name {
  width: 10rem;
}
.teacher-info .dept-name {
  width: 30rem;
}
.teacher-info .score {
  width: 5rem;
  color: red;
  font-weight: bold;
}
/**分页样式**/
.pagination-wrp {
  font-size: 14px;
  line-height: 40px;
  max-width: 1200px;
}
.pagination-wrp:first-child {
  text-align: right;
}
</style>
